<template>
  <div id="bottom-menu-wrapper">
    <div class="menu-item" @click="prev">
      <div class="menu-image-wrapper">
        <img src="../assets/back-icon.png" alt="">
      </div>
      <span class="menu-text">撤销</span>
    </div>
    <div class="menu-item" @click="forward">
      <div class="menu-image-wrapper">
        <img src="../assets/forward-icon.png" alt="">
      </div>
      <span class="menu-text">重做</span>
    </div>
    <div class="menu-item">
      <div class="menu-image-wrapper">
        <img src="../assets/text-icon.png" alt="">
      </div>
      <span class="menu-text">相关文案</span>
    </div>
    <div class="menu-item" @click="showAddPopup">
      <div class="menu-image-wrapper">
        <img src="../assets/add-icon.png" alt="">
      </div>
      <span class="menu-text">添加</span>
    </div>
    <div class="menu-item" @click="showFontStyleMenu">
      <div class="menu-image-wrapper">
        <img src="../assets/font-icon.png" alt="">
      </div>
      <span class="menu-text">文字样式</span>
      <div v-show="fontStyleVisible" class="expand-menu-wrapper">
        <div class="expand-menu-item" @click="showSlider('fontSize')">
          <div class="expand-menu-image-wrapper">
            <img src="../assets/size-icon.png" alt="">
          </div>
          <div class="expand-menu-text">字号</div>
        </div>
        <div class="expand-menu-item" @click="showColorPicker()">
          <div class="expand-menu-image-wrapper">
            <img src="../assets/color-icon.png" alt="">
          </div>
          <div class="expand-menu-text">颜色</div>
        </div>
        <!-- <div class="expand-menu-item">
          <div class="expand-menu-image-wrapper">
            <img src="../assets/align-icon.png" alt="">
          </div>
          <div class="expand-menu-text">对齐</div>
        </div> -->
        <div class="expand-menu-item" @click="showSlider('lineHeight')">
          <div class="expand-menu-image-wrapper">
            <img src="../assets/lineheight-icon.png" alt="">
          </div>
          <div class="expand-menu-text">行高</div>
        </div>
        <div class="expand-menu-item" @click="showSlider('fontWeight')">
          <div class="expand-menu-image-wrapper">
            <img src="../assets/weight-icon.png" alt="">
          </div>
          <div class="expand-menu-text">加粗</div>
        </div>
      </div>
    </div>
    <div class="menu-item">
      <div class="menu-image-wrapper">
        <img src="../assets/edit-icon.png" alt="">
      </div>
      <span class="menu-text">编辑</span>
    </div>
    <van-popup v-model="addPopupVisible" round position="bottom">
      <AddList @close="addPopupVisible = false" />
    </van-popup>
    <van-popup v-model="sliderVisible" round>
      <div class="slider-wrapper">
        <h3 class="slider-title">设置</h3>
        <van-slider class="slider-bar"  v-model="sliderValue" @change="onSliderChange" :min="min" :max="max"  />
      </div>
    </van-popup>

    <van-popup v-model="colorPickerVisible" round>
      <ColorPicker @change="setFontColor" />
    </van-popup>

  </div>
</template>

<script>
import { Popup, Notify, Slider } from 'vant'
import AddList from './add-list.vue'
import ColorPicker from './color-picker.vue'
import { prev, forward } from './operate'
import { state } from './store'

export default {
  components: {
    AddList,
    ColorPicker,
    [Popup.name]: Popup,
    [Slider.name]: Slider,
    [Notify.Component.name]: Notify.Component
  },
  data () {
    return {
      addPopupVisible: false,
      fontStyleVisible: false,
      sliderVisible: false,
      colorPickerVisible: false,
      min: 10,
      max: 50,
      sliderValue: 12
    }
  },
  methods: {
    prev,
    forward,
    setFontColor (color) {
      state.currentSelect.set({
        fill: color
      })
      state.canvas.renderAll()
    },
    showColorPicker () {
      this.colorPickerVisible = true
    },
    onSliderChange (value) {
      state.currentSelect.set({
        [this.type]: value
      })
      state.canvas.renderAll()
    },
    showSlider (type) {
      const { fontSize, fontWeight, lineHeight } = state.currentSelect
      switch (type) {
        case 'fontSize':
          this.sliderValue = fontSize
          this.min = 10
          this.max = 100
          break
        case 'lineHeight':
          this.min = 1
          this.sliderValue = lineHeight
          this.max = 5
          break
        case 'fontWeight':
          this.min = 100
          this.sliderValue = fontWeight === 'normal' ? 300 : fontWeight
          this.max = 800
          break
      }
      this.type = type
      console.log(state.currentSelect.fontSize)
      console.log(state.currentSelect.fontWeight)
      console.log(state.currentSelect.lineHeight)
      this.sliderVisible = true
      console.log(state.currentSelect)
    },
    showAddPopup () {
      this.addPopupVisible = true
    },
    showFontStyleMenu (e) {
      if (!state.currentSelect || !state.currentSelect.text) {
        this.$notify('请选中文本')
      }
      this.fontStyleVisible = !this.fontStyleVisible
      const handler = () => {
        this.fontStyleVisible = false
        window.removeEventListener('click', handler)
      }
      window.addEventListener('click', handler)
      e.stopPropagation()
    }
  }
}
</script>

<style lang="stylus" scoped>
.slider-wrapper {
  width: 80vw;
  padding: 10px;
  margin: 0 auto;
  overflow hidden;

  .slider-title {
    padding: 10px 0;
    font-size: 14px;
    color: #333;
  }
  .slider-bar {
    margin-bottom: 10px;
  }
}

.expand-menu-wrapper {
  position: absolute;
  top: -20px;
  display: flex;
  flex-direction column;
  align-items: center;
  justify-content: center;
  padding: 14px 0;
  border-radius: 22px;
  background: #FF9E18;
  transform: translateY(-100%);

  .expand-menu-item {
    display flex;
    align-items: center;
    padding: 0 10px;
    margin-bottom: 10px;

    &:last-child {
      margin-bottom: 0;
    }
    .expand-menu-image-wrapper {
      img {
        display block;
        width: 15px;
        height: 15px;
        margin-right: 5px;
      }
    }
    .expand-menu-text {
      white-space: nowrap;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
    }
  }
}

#bottom-menu-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  padding: 10px 20px;
  box-sizing: border-box;
  justify-content: space-between;
  background-color: #fff;
}

.menu-item {
  position: relative;
  text-align: center;
  .menu-image-wrapper {
    text-align: center;
    margin-bottom: 6px;
    img {
      display: block;
      width: 33px;
      height: 33px;
      margin: 0 auto;
    }
  }
  .menu-text {
    font-size: 11px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #666666;
  }
}

</style>
